*{
  margin: 0;
  padding: 0;
}
body,.container{
  width: 100vw;
  height: 100vh;
}
/* main */
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: #1d4322; */
}

.circle{
  stroke-dasharray: 1194;
  stroke-dashoffset: 1194;
}
.tick{
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
}
h2{
  color: #68e534;
  font-size: 50px;
  opacity: 0;
  margin-top: 20px;
}

@keyframes circle {
  from{
    stroke-dashoffset: 1194;
  }
  to{
    stroke-dashoffset: 2388;
  }
}
@keyframes tick {
  from{
    stroke-dashoffset: 350;
  }
  to{
    stroke-dashoffset: 0;
  }
}

input{
  width: 20px;
  height: 20px;
}

input[type='checkbox']:checked + svg .circle{
  animation: circle 1s ease-in-out;
  animation-fill-mode:forwards;
}
input[type='checkbox']:checked + svg .tick{
  animation: tick .95s ease-in-out;
  animation-delay: .8s;
  animation-fill-mode:forwards;
}
input[type='checkbox']:checked ~ h2{
  transition: 0.6s ease-in-out;
  transition-delay: 1.2s;
  opacity: 1;
}